<!doctype html>
<html lang="zh-CN">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>电子相册系统</title>
<link rel="stylesheet" href="/css/style.css">
<!-- <link rel="stylesheet" href="style.css"> -->
</head>
<body>
<!-- 创建相册页面 -->
 <div id="createAlbumView" class="page">
  <div class="auth-center" style="max-width:520px;">
    <h1>创建相册</h1>
    <p class="muted">填写相册信息</p>


    <div class="field"><label class="muted">相册标题</label><input id="newAlbumTitle" placeholder="如：海边旅行" /></div>
    <div class="field"><label class="muted">类别</label>
      <select id="newAlbumCategory">
        <!-- 选项将由其他函数动态添加 -->
      </select>
    </div>

    <div style="display:flex;gap:10px;margin-top:20px;">
      <button class="btn" onclick="submitNewAlbum()">创建</button>
      <button class="btn ghost" onclick="backToMain()">返回主页</button>
    </div>
  </div>
</div>


<script>
    window.onload = function() {
        getCategoryList();
    }
    function backToMain() {
    window.location.href = '/main';
    }
    function getCategoryList() {
        fetch('/getcategorylist')
        .then(res => res.json())
        .then(data => {
            const categorySelect = document.getElementById('newAlbumCategory');
            categorySelect.innerHTML = '';
            data.forEach(category => {
                const option = document.createElement('option');
                option.value = category;
                option.textContent = category;
                categorySelect.appendChild(option);
            });
        });
    }
    function submitNewAlbum() {
        const title = document.getElementById('newAlbumTitle').value;
        const categoryname = document.getElementById('newAlbumCategory').value;
        fetch('/Createalbum', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ title, categoryname })
        })
        .then(res => res.json())
        .then(data => {
            if (data.success) {
                alert('相册创建成功！');
                window.location.href = '/main';
            } else {
                alert('相册创建失败：' + data.message);
            }
        });
    }
</script>
</body>
</html>


